<template>
    <div>
        <div class="box">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>
    </div>
</template>
<script setup lang="ts">
import router from '@/router'
import { storage } from '@/store/sessionStorage'
import { onMounted, ref } from 'vue'

//记录刷新一次
//使用CSS解决浏览器输入框在记住密码后改变颜色问题后，需要手动刷新页面一次才会生效
let isRefresh = ref('')
isRefresh.value = storage.get('isRefresh') || ''
if (!isRefresh.value) {
    location.reload()
    storage.set('isRefresh', 'true')
}

onMounted(() => {})
</script>

<style scoped lang="scss">
.box {
    // display: flex;
    // flex-wrap: wrap;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    .item {
        width: 50px;
        height: 50px;
        border: 2px solid darkslategrey;
        box-sizing: border-box;
        // --n: 5; /* 一行几个 */
        // --space: calc(100% - var(--n) * 50px); /* 一行减去item的宽度后剩下的间距 */
        // --leftRight: calc(var(--space) / var(--n) / 2); /* 每个item左右的间距 */
        // margin: 10px var(--leftRight);
        // background-color: #af2323;
        margin: 10px auto;
    }
}
</style>
